function dateFormat(time){
    var birth = new Date(time);
    var month = birth.getMonth()+1;
    if (birth.getMonth()+1<10){
        var month = "0" + (birth.getMonth()+1);
    }
    var dat = birth.getDate();
    if (birth.getDate() < 10){
        var dat = "0" + birth.getDate();
    }
    return birth.getFullYear()+"-"+month+"-"+dat;
}	

function CustomersComponent(template){
	var model=null;
	this.template=template;
	this.addCustomer=function(customer){
		j.ajax("POST","addCustomer",customer,{"Content-Type":"application/json"},this,function(customer){
			model.push(customer);
			_render(model);
		});
	};
	this.updateCustomer=function(customer){
		
	};
	this.findAllCustomers=function(){
		j.ajax("GET","findAllCustomers",null,null,this,function(customers){
			model=customers;
			_render(model);
		});
		
	};
	
	function _render(data){
		template.empty();
		data.forEach(function(item){
			var sex = 'boy';
			if(!item.sex)
				sex = "gril";
			$("<tr/>").append($("<td/>").text(item.id))
			.append($("<td/>").text(item.cname))
			.append($("<td/>").text(item.sal))
			.append($("<td/>").text(sex))
			.append($("<td/>").text(dateFormat(item.birth)))
			.append($("<td/>").append($("<button/>").text("del").addClass("btn").data(item)))
			.append($("<td/>").append($("<button/>").text("update").addClass("btn").data(item)))
			.appendTo(template);
		});
		$("button:contains(del)").on("click",function(){
			$this=$(this);
			j.ajax("DELETE","deleteCustomer?id="+$this.data().id,null,null,this,function(m){
				data=data.filter(function(item){
					return item.id!=$this.data().id;
				});
				model = data;
				_render(data);
			});
		});
		
		$("button:contains(update)").on("click",function(){
			$this=$(this);
			var tr = $this.parent().parent();
			$("#modal_body").append($('<tr><td>id:</td><td><input readonly="readonly" type="text" id="updateId" value=' + tr.children().eq(0).text() +'></td></tr>'))
			.append($('<tr><td>name:</td><td><input type="text" id="updateName" value=' + tr.children().eq(1).text() +'></td></tr>'))
			.append($('<tr><td>sal:</td><td><input type="text" id="updateSal" value=' + tr.children().eq(2).text() +'></td></tr>'))
			.append($('<tr><td>sex:</td><td><input type="text" id="updateSex" value=' + tr.children().eq(3).text() +'></td></tr>'))
			.append($('<tr><td>birth:</td><td><input type="date" id="updateBirth" value=' + tr.children().eq(4).text() +'></td></tr>'));
			$('#myModal').modal('show');
		});
		
		$("#changeCustomer").on("click", function(){
			var updateId = $("#updateId").val();
			var updateName = $("#updateName").val();
			var updateSal = $("#updateSal").val();
			var updateSex = $("#updateSex").val();
			updateSex = false;
			if(updateSex == '男')
				updateSex=true;
			
			var updateBirth = $("#updateBirth").val();
			console.log(updateSex + " " + updateBirth);
			var customer = {id:updateId, cname:updateName,sex:updateSex,birth:updateBirth,sal:updateSal};
			
			j.ajax("PUT","updateCustomer",customer,{"Content-Type":"application/json"},this,function(customer){
				$("#modal_body").empty();
				$('#myModal').modal('hide');
			});
		});
	}
	
}